<template>
	<view class="u-page">
		<u-collapse v-for="(item,index) in list">
			<u-collapse-item :title="item.daterange">
				<view class="list">
					<view class="item">
						<view class="title">结算周期</view>
						<view class="value">{{item.daterange}}</view>
					</view>
					<view class="item">
						<view class="title">销售总额</view>
						<view class="value">￥{{item.money}}</view>
					</view>
					<view class="item">
						<view class="title">订单数</view>
						<view class="value">￥{{item.order}}</view>
					</view>
					<view class="item">
						<view class="title">销售套餐</view>
						<view class="value">￥{{item.package_recharge}}</view>
					</view>
					<view class="item">
						<view class="title">支付押金</view>
						<view class="value">￥{{item.pay_yajin}}</view>
					</view>
					<view class="item">
						<view class="title">总成本</view>
						<view class="value">￥{{item.cost_all}}</view>
					</view>
					<view class="item">
						<view class="title">分摊成本</view>
						<view class="value">￥{{item.cost_all_me}}</view>
					</view>
					<view class="item">
						<view class="title">这算毛巾成本</view>
						<view class="value">￥{{item.cost_tiao}}</view>
					</view>
					<view class="item">
						<view class="title">利润</view>
						<view class="value">￥{{item.profit}}</view>
					</view>
					<view class="item">
						<view class="title">月付订单</view>				
					</view>
					<view class="table">
						<view class="thead">
							<view style="width: 30%;">订单数</view>
							<view style="width: 35%;">金额</view>
							<view style="width: 35%;">毛巾</view>
						</view>
						<view class="tbody">
							<view style="width: 30%;border-top: 0;">{{item.yuefu_order.order}}</view>
							<view style="width: 35%;border-top: 0;">￥{{item.yuefu_order.money}}</view>
							<view style="width: 35%;border-top: 0;">{{item.yuefu_order.towel_dai}}袋{{item.yuefu_order.towel_tiao}}条</view>
						</view>
					</view>
					<view class="item">
						<view class="title">零售订单</view>				
					</view>
					<view class="table">
						<view class="thead">
							<view style="width: 30%;">订单数</view>
							<view style="width: 35%;">金额</view>
							<view style="width: 35%;">毛巾</view>
						</view>
						<view class="tbody">
							<view style="width: 30%;border-top: 0;">{{item.lingshou_order.order}}</view>
							<view style="width: 35%;border-top: 0;">￥{{item.lingshou_order.money}}</view>
							<view style="width: 35%;border-top: 0;">{{item.lingshou_order.towel_dai}}袋{{item.lingshou_order.towel_tiao}}条</view>
						</view>
					</view>
					<view class="item">
						<view class="title">套餐订单</view>				
					</view>
					<view class="table">
						<view class="thead">
							<view style="width: 30%;">订单数</view>
							<view style="width: 35%;">毛巾</view>
						</view>
						<view class="tbody">
							<view style="width: 30%;border-top: 0;">{{item.package_order.order}}</view>				
							<view style="width: 35%;border-top: 0;">{{item.package_order.towel_dai}}袋{{item.package_order.towel_tiao}}条</view>
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
		<u-empty v-if="list.length==0" text="没有结算账单!" mode="search" marginTop="50"></u-empty>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				seller_id:'',
				list:[]
			}
		},
		onPullDownRefresh() {
			this.list=[];
			this.pagelist(true);
		},
		onLoad(e) {
			this.seller_id=e.seller_id || '';
			this.pagelist();
		},
		methods: {
			...methods,
			pagelist:function(pulldown){
				this.$get("admin/seller/jiesuan",{
					seller_id:this.seller_id
				},true).then(res=>{
					if(pulldown){
						uni.stopPullDownRefresh();
					}			
					this.list=res;					
				});		
			}
		}
	} 
</script>

<style lang="scss">
	.list{
		margin-bottom: 20rpx;
		background-color: #f1f1f1;
		padding: 20rpx;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70rpx;
			line-height: 70rpx;
			.title{
				width: 40%;
				font-weight: bold;
				font-size: 34rpx;
			}
			.value{
				width: 60%;
				text-align: left;
			}
		}
		.table{
			margin-bottom: 10rpx;
			width: 95%;
			.thead,.tbody{
				display: flex;
				justify-content: flex-start;
				view{
					border: 1px solid darkgrey;
					padding: 4rpx 8rpx;
				}
			}
		}
	}
</style>